<template>
  <div class="intelligent-qa">
    <!-- 聊天消息区域 -->
    <div class="chat-container">
      <div class="messages-area" ref="messagesArea">
        <div v-if="messages.length === 0" class="welcome-message">
          <div class="text-center py-12">
            <i class="fas fa-robot text-4xl text-blue-500 mb-4"></i>
            <h2 class="text-lg font-bold text-gray-800 mb-2">智能法律助手</h2>
            <p class="text-gray-600 text-sm mb-6">我可以帮您解答法律问题，分析案件情况</p>
            
            <!-- 快速问题 -->
            <div class="quick-questions">
              <h3 class="text-sm font-medium text-gray-700 mb-3">常见问题</h3>
              <div class="grid grid-cols-1 gap-2">
                <button 
                  v-for="question in quickQuestions" 
                  :key="question"
                  @click="sendQuickQuestion(question)"
                  class="bg-blue-50 text-blue-700 px-4 py-2 rounded-lg text-sm hover:bg-blue-100 transition-colors"
                >
                  {{ question }}
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 消息列表 -->
        <div v-else class="messages-list px-4 py-4">
          <div 
            v-for="message in messages" 
            :key="message.id"
            :class="[
              'message mb-4',
              message.isUser ? 'user-message' : 'bot-message'
            ]"
          >
            <div v-if="!message.isUser" class="flex items-start">
              <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
                <i class="fas fa-robot text-blue-600 text-sm"></i>
              </div>
              <div class="flex-1">
                <div class="bg-white p-3 rounded-xl shadow-sm">
                  <p class="text-gray-800 text-sm leading-relaxed">{{ message.content }}</p>
                  <p class="text-xs text-gray-500 mt-2">{{ formatTime(message.timestamp) }}</p>
                </div>
              </div>
            </div>
            
            <div v-else class="flex items-start justify-end">
              <div class="flex-1 flex justify-end">
                <div class="bg-blue-600 text-white p-3 rounded-xl max-w-[80%]">
                  <p class="text-sm leading-relaxed">{{ message.content }}</p>
                  <p class="text-xs text-blue-100 mt-2">{{ formatTime(message.timestamp) }}</p>
                </div>
              </div>
              <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center ml-3 mt-1">
                <i class="fas fa-user text-gray-600 text-sm"></i>
              </div>
            </div>
          </div>
          
          <!-- 正在输入指示器 -->
          <div v-if="isTyping" class="flex items-start mb-4">
            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-robot text-blue-600 text-sm"></i>
            </div>
            <div class="bg-white p-3 rounded-xl shadow-sm">
              <div class="flex space-x-1">
                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area bg-white border-t px-4 py-3">
      <div class="flex items-center space-x-3">
        <div class="flex-1 relative">
          <input 
            v-model="currentMessage" 
            type="text" 
            placeholder="请输入您的法律问题..."
            class="w-full px-4 py-3 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            @keyup.enter="sendMessage"
            @input="handleInput"
          >
        </div>
        <button 
          @click="sendMessage"
          :disabled="!currentMessage.trim() || isTyping"
          class="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <i class="fas fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, nextTick } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'MarketingIntelligentQA',
  setup() {
    const messages = ref([])
    const currentMessage = ref('')
    const isTyping = ref(false)
    const messagesArea = ref(null)
    
    const quickQuestions = [
      '交通事故责任如何认定？',
      '交通事故伤残鉴定流程是什么？',
      '酒驾肇事的法律后果有哪些？',
      '交通事故赔偿项目包括哪些？',
      '肇事逃逸如何处罚？',
      '电动车事故责任怎么划分？'
    ]
    
    const sendQuickQuestion = (question) => {
      currentMessage.value = question
      sendMessage()
    }
    
    const sendMessage = async () => {
      if (!currentMessage.value.trim() || isTyping.value) return
      
      const userMessage = {
        id: Date.now(),
        content: currentMessage.value,
        isUser: true,
        timestamp: new Date()
      }
      
      messages.value.push(userMessage)
      const userQuestion = currentMessage.value
      currentMessage.value = ''
      
      // 滚动到底部
      await nextTick()
      scrollToBottom()
      
      // 显示正在输入
      isTyping.value = true
      
      // 模拟AI回复
      setTimeout(() => {
        const botMessage = {
          id: Date.now() + 1,
          content: generateResponse(userQuestion),
          isUser: false,
          timestamp: new Date()
        }
        
        messages.value.push(botMessage)
        isTyping.value = false
        
        nextTick(() => {
          scrollToBottom()
        })
      }, 1500)
    }
    
    const generateResponse = (question) => {
      const responses = {
        '交通事故责任': '根据《道路交通安全法》第76条，交通事故责任认定主要依据当事人的行为对发生道路交通事故所起的作用以及过错的严重程度确定。分为全部责任、主要责任、同等责任、次要责任和无责任。建议您保留好事故现场照片、交警出具的事故责任认定书等证据材料。',
        '伤残鉴定': '交通事故伤残鉴定流程：1. 治疗终结后向有资质的司法鉴定机构申请；2. 提交病历、影像等医疗资料；3. 鉴定机构安排专家进行鉴定；4. 出具伤残鉴定报告。鉴定等级分为一至十级，影响赔偿金额计算。',
        '酒驾肇事': '酒驾肇事的法律后果：1. 刑事责任：构成危险驾驶罪或交通肇事罪；2. 民事责任：承担全部或主要赔偿责任；3. 行政责任：吊销驾驶证、罚款、拘留。血酒精含量≥80mg/100ml为醉驾，≥20mg/100ml为酒驾。',
        '赔偿项目': '交通事故赔偿项目包括：医疗费、误工费、护理费、交通费、住宿费、住院伙食补助费、营养费、残疾赔偿金、残疾辅助器具费、被扶养人生活费、康复费、继续治疗费、精神损害抚慰金等。具体数额需根据伤情和收入情况计算。',
        '肇事逃逸': '肇事逃逸处罚：1. 行政处罚：由公安机关处200-2000元罚款，吊销驾驶证，终生不得重新取得；2. 刑事处罚：构成交通肇事罪，处3年以上7年以下有期徒刑；致人死亡的，处7年以上有期徒刑。',
        '电动车事故': '电动车事故责任认定：1. 超标电动车按机动车处理；2. 标准电动车按非机动车处理；3. 责任认定考虑是否遵守交通规则、是否有过错行为；4. 机动车与非机动车碰撞，机动车方承担更重举证责任。'
      }
      
      for (const [key, response] of Object.entries(responses)) {
        if (question.includes(key)) {
          return response
        }
      }
      
      return '感谢您的交通事故相关咨询。这是一个专业的交通法律问题，建议您提供更多事故详细信息，如事故时间、地点、责任认定情况等，或者联系我们的专业交通事故律师进行具体分析。我们的律师团队有丰富的交通事故处理经验，会根据您的具体情况提供针对性的法律建议。'
    }
    
    const handleInput = () => {
      // 处理输入事件
    }
    
    const scrollToBottom = () => {
      if (messagesArea.value) {
        messagesArea.value.scrollTop = messagesArea.value.scrollHeight
      }
    }
    
    const formatTime = (timestamp) => {
      return dayjs(timestamp).format('HH:mm')
    }
    
    return {
      messages,
      currentMessage,
      isTyping,
      messagesArea,
      quickQuestions,
      sendQuickQuestion,
      sendMessage,
      handleInput,
      formatTime
    }
  }
}
</script>

<style scoped>
.intelligent-qa {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px); /* 减去底部导航的高度 */
  background-color: #f8fafc;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.messages-area {
  flex: 1;
  overflow-y: auto;
  background-color: #f8fafc;
}

.welcome-message {
  background: white;
  margin: 16px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quick-questions {
  max-width: 300px;
  margin: 0 auto;
}

.messages-list {
  padding-bottom: 20px;
}

.input-area {
  border-top: 1px solid #e5e7eb;
  background: white;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.animate-bounce {
  animation: bounce 1.4s infinite;
}
</style> 